<script setup>
import { ref, nextTick } from 'vue'
import http from '@/utils/http'
import fonts from '@/utils/font'

import { Delete, Share, Close } from '@element-plus/icons-vue'
import Openlayers from '@/components/maps/openlayers.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const openlayersRef = ref(null)
const show = ref(false)
const visibles = ref(false)
const Props = defineProps({ height: { type: String, default: '256' }, backColor: { type: String, default: '' } })
const searchForm = ref({})
const color = ref('#353A42')
const familyData = ref(fonts.getReadList())
const fontsizeData = ref(fonts.fontsize())
const video = type => {
    // familyData.value = fonts.getReadList();
    // fontsizeData.value = fonts.fontsize();
}
const styleForm = ref({
    color: '#353A42',
    ccolor: Props.backColor ? Props.backColor : '#353A42',
    bcolor: '#353A42',
    family: '',
    size: '',
    family: '',
    text: '',
    textstyle: '',
    num: 0,
    decoration: '',
    lineSpacing: '',
    lineHeight: '',
    textalinen: '',
    family: '',
    cotent: [],
    name: ''
})

const treeData = ref([])
const addForm = ref({})
const map_id = ref(0)
const cascaderProps = ref({
    children: 'children',
    label: 'name',
    value: 'id',
    emitPath: false,
    checkStrictly: true
})
const initMap = item => {
  if (item.map && item.map.map_file) {
    nextTick(() => {
      item.map.isEditPolygon = true
      openlayersRef.value.init(item.map, 9)
      openlayersRef.value.remcontetnList()
      if (item.extend && item.extend.length > 0&& openlayersRef.value!=null) {
    openlayersRef.value.showcreatePolygon(item)
    // openlayersRef.value.drawPolygon(item.extend);
  }
    })
  } else {
    console.log(item,0); 
    // openlayersRef.value.removeMap()
  }
  
}

const initdrawPolygon = () => {
    addForm.value.extend = addForm.value.extend || []
    styleForm.value.grid_index = addForm.value.extend.length
    styleForm.value.text = addForm.value.name
    console.log(styleForm.value)
    addForm.value.extend.push(JSON.parse(JSON.stringify(styleForm.value)))
    // console.log(addForm.value.extend);    
    openlayersRef.value.drawPolygon([styleForm.value])
}
const cascader = ref(null)

const selectMap = item => {
    //如果切换了地图  网格数据就清除掉
    let nodesObj = cascader.value.getCheckedNodes()
    addForm.value.map_id = item
    addForm.value.map = nodesObj[0].data
    nextTick(() => {
        nodesObj[0].data.isEditPolygon = true
        openlayersRef.value.init(nodesObj[0].data, 9)
    })
}

/**
 * 样式应用 只是重新绘制  不保存数据库
 */
const setstylePolyon = () => {
    visibles.value = false
    let extendsArr = addForm.value.extend
    styleForm.value.cotent = extendsArr[grid_index.value].cotent
    extendsArr[grid_index.value] = styleForm.value
    addForm.value.extend = extendsArr
    openlayersRef.value.setstylePolyon1(styleForm.value)
}

const removePolygon = () => {
    styleForm.value = {}
    visibles.value = false
    addForm.value.extend = []
    openlayersRef.value.removecreatePolygon(addForm.value)
}

const subDrawPolyon = e => {
    http.post('/v1/fire/create', addForm.value).then(res => {
        if (res.code == 1) {
            ElMessage.success('更新成功')
        }
    })
}

/** 
 * 暴露给子组件的方法
 * 1:点击网格的操作
 */
const grid_index = ref(0)
const clickGird = e => {
    visibles.value = true
    let index = e.values_.grid_index
    if (index >= 0) {
        grid_index.value = index
        styleForm.value = addForm.value.extend[index]
    }
}
const gridModifyEnd1 = e => {
    let index = e.feature.values_.grid_index
    if (index >= 0) {
        addForm.value.extend[index].cotent = e.feature.getGeometry().getCoordinates()
    } else {
        addForm.value.extend[styleForm.value.grid_index].cotent = e.feature.getGeometry().getCoordinates()
    }
}
const getRuleStyle = ref({})

//需要加载的地图信息
const map = ref({})

defineExpose({
    treeData,
    map_id,
    initMap,
    addForm,
    confirm
})
</script>
<template>
    <div class="floorPlan">
        <div class="search-from">
            <el-form :inline="true" label-position="left" label-width="auto"
                style="width: 100%; display: flex; align-items: center; justify-content: space-between">
                <div>
                    <el-form-item label="楼宇楼层:">
                        <el-cascader ref="cascader" v-model="map_id" @change="selectMap" :options="treeData"
                            :props="cascaderProps" clearable />
                    </el-form-item>
                </div>
                <div>
                    <el-link class="mR10" :underline="false" :disabled="!map_id" @click="initdrawPolygon()">
                        <img src="@/assets/firl/add.png" alt /> 绘制
                    </el-link>
                    <el-link class="mR10" :underline="false" :disabled="!map_id" @click="subDrawPolyon()">
                        <img src="@/assets/firl/bc.png" alt /> 保存
                    </el-link>
                    <el-link class="mR10" :underline="false" :disabled="!map_id" @click="removePolygon()">
                        <img src="@/assets/firl/qc.png" alt /> 清除
                    </el-link>
                </div>
            </el-form>
        </div>
        <Openlayers class="map_box_item" v-if="addForm.map != null" :class="{ 'map_box_item1': Props.height != '256' }"
            ref="openlayersRef" @clickGird="clickGird" @gridModifyEnd1="gridModifyEnd1"></Openlayers>
        <canvas ref="widthways" :style="getRuleStyle" style="flex: none"></canvas>
        <div class="popper" v-if="visibles">
            <div class="text_box_head">
                <p>文本设置</p>
                <el-icon class="popper_icon" @click="visibles = false">
                    <Close />
                </el-icon>
            </div>
            <el-form label-position="left" label-width="75px" :model="styleForm" class="texts1">
                <el-form-item label="文本字体" style="margin-bottom: 0;">
                    <el-select v-model="styleForm.family" class="textse" placeholder="全部" style="width:80%" clearable
                        size="small">
                        <el-option v-for="item in familyData" :key="item.ch" :label="item.ch" :value="item.ch" />
                    </el-select>
                </el-form-item>
                <el-form-item label="文本字号" style="margin-bottom: 0;">
                    <el-select v-model="styleForm.size" class="textse" placeholder="全部" style="width:80%" clearable
                        size="small">
                        <el-option v-for="item in fontsizeData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="文本颜色" style="margin-bottom: 5px;">
                    <el-color-picker show-alpha class="textse" v-model="styleForm.color" size="small"></el-color-picker>
                    {{
                        styleForm.color }}
                </el-form-item>
                <div class="text_box_head">
                    <p>外形设置</p>
                </div>
                <el-form-item label="背景填充" style="margin-bottom: 0;">
                    <el-color-picker show-alpha class="textse" v-model="styleForm.ccolor" :disabled="Props.backColor != ''"
                        size="small"></el-color-picker>
                    {{ styleForm.ccolor }}
                </el-form-item>
                <el-form-item label="背景边框" style="margin-bottom: 0;">
                    <el-color-picker show-alpha class="textse" v-model="styleForm.bcolor" size="small"></el-color-picker>
                    {{ styleForm.bcolor }}
                </el-form-item>
                <el-form-item label="背景宽度" style="margin-bottom: 0;">
                    <el-input v-model="styleForm.num" style="width:80%" clearable size="small" />
                </el-form-item>
                <el-button size="small" type="primary" @click="setstylePolyon()">应用</el-button>
            </el-form>
        </div>
    </div>
</template>
<style lang="scss" scoped>
:deep(.textse .el-input.el-input--suffix) {

    // 修改背景颜色、字体颜色、边框、宽高
    .el-input__wrapper {
        background: rgb(240, 241, 245) !important;
        border: none;
        color: #535862;
    }

    .el-input__inner::placeholder {
        color: #535862;
    }

    .el-icon-arrow-up:before {
        color: #535862;
    }
}

.ml-4 {
    width: 27px;
    background: rgb(240, 241, 245) !important;
    border: none;
}

:deep(.texts .el-color-picker .el-tooltip__trigger .el-tooltip__trigger) {
    border: none;
    background: rgb(240, 241, 245) !important;
}

// :deep(.texts1 .el-form-item__content) {
//     justify-content: center;
// }

.search-from {
    border-bottom: 1px solid rgba(132, 139, 157, 0.16);
}

.floorPlan {
    position: relative;
}

.floorPlan_map {
    width: 100%;
    height: 100%;

    background: #ccc;
    border-radius: 6px;
}

.popper {
    position: absolute;
    right: 0;
    top: 75px;
    padding: 0;
    width: 300px;
    height: 320px;
    box-sizing: border-box;
    padding: 0 17px;

    background: rgb(255, 255, 255);
    border: 1px solid rgba(132, 139, 157, 0.16);
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.popper_icon {
    cursor: pointer;
}

.text_box_head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: rgb(53, 58, 66);
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}

.text_box {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;

    .text_box_head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgb(53, 58, 66);
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
    }
}

.map_box_item {
    box-sizing: border-box;
    width: calc(50vw - 150px);
    height: calc(100vh - 256px);
    margin: 10px 0;
}

.map_box_item1 {
    box-sizing: border-box;
    width: calc(50vw - 150px);
    height: calc(50vh - 100px);
    margin: 10px 0;
}
</style>
